<!-- 发布任务 views/master/publishTask.vue -->
<template>
  <van-form @submit="onSubmit">
    <tContent title="发布任务">
      <div class="filedBox" slot="pannelContent">
        <van-field
          label="流水号"
          maxlength="12"
          name="lsId"
          v-model="userInfo.lsId"
          clearable
          placeholder="请输入流水号"
          :rules="[{ pattern, message: '请输入正确内容' }]"
        />
        <van-field
          v-model="userInfo.lenderName"
          label="客户姓名"
          name="lenderName"
          maxlength="16"
          clearable
          placeholder="请输入客户姓名"
          :rules="[
            { name: 'lenderName', validator, message: '请输入正确客户姓名' }
          ]"
        />
        <van-field name="userInfoSex" label="性别">
          <template #input>
            <van-radio-group
              v-model="userInfo.userInfoSex"
              direction="horizontal"
            >
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="userInfo.lenderPhone"
          label="手机号"
          name="lenderPhone"
          maxlength="11"
          :rules="[
            {
              name: 'lenderPhone',
              required: true,
              validator,
              message: '请输入正确的手机号'
            }
          ]"
          clearable
        />

        <van-field
          readonly
          clickable
          name="area"
          :value="areaAddress"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
          :rules="[{ required: true }]"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup>
        <van-field
          label="详细地址"
          name="lenderAddress"
          placeholder="请输入详细地址"
          v-model="userInfo.lenderAddress"
          type="textarea"
          rows="1"
          autosize
          :rules="[
            { name: 'lenderAddress', validator, message: '地址格式不正确' }
          ]"
        />
        <van-field
          readonly
          clickable
          name="workOrderEndDate"
          :value="userInfo.workOrderEndDate"
          label="日历"
          placeholder="点击选择日期"
          @click="showCalendar = true"
          :rules="[{ required: true }]"
        />
        <van-calendar v-model="showCalendar" @confirm="onCalendarConfirm" />
        <van-field
          rows="2"
          autosize
          name="workOrderDesc"
          v-model="userInfo.workOrderDesc"
          label="任务说明"
          type="textarea"
          placeholder="拍照清晰"
        />
      </div>
      <div slot="otherContent" style="margin:0 16px;">
        <van-button block type="info" native-type="submit">确认发布</van-button>
      </div>
    </tContent>
  </van-form>
</template>
<script>
import { Toast, Dialog } from 'vant'
import tContent from '@/components/templete/content.vue'
import { areaList } from '@/utils/area.js'
import {mapState} from 'vuex'
export default {
  name: 'tMain',
  data() {
    return {
      userInfo: {
        lsId: '',
        userInfoName: '',
        userInfoSex: '1',
        workOrderEndDate: '',
        workOrderDesc: '',
        lenderPhone: ''
      },
      pattern: /^\w+$/,
      areaList: areaList,
      searchResult: [],
      areaAddress: '',
      showArea: false,
      showCalendar: false
    }
  },
  components: {
    tContent
  },
  computed:{
    ...mapState(['orderDetail'])
  },
  methods: {
    validator(val, rule) {
      switch (rule.name) {
        case 'userInfoPhone':
          return /^1[3456789]\d{9}$/.test(val)
        case 'userInfoName':
          return /^[A-Za-z\u4e00-\u9fa5]{2,8}$/.test(val)
        case 'lenderAddress':
          return /^[0-9A-Za-z_\u4e00-\u9fa5]{2,30}$/.test(val)
      }
    },
    onSubmit(values) {
      const _this = this
      Dialog.confirm({
        title: '提示',
        message: '确定要发布吗'
      })
        .then(() => {
          // on confirm
          this.$router.push('/result/publish')  
        })
        .catch(() => {
          // on cancel
        })
    },
    onConfirm(values) {
      this.areaAddress = values
        .filter(item => !!item)
        .map(item => item.name)
        .join('/')
      this.showArea = false
    },
    onCalendarConfirm(date) {
      this.userInfo.workOrderEndDate = `${date.getMonth() +
        1}/${date.getDate()}`
      this.showCalendar = false
    },
    backFillForm(){
      console.log(this.orderDetail)
      //   userInfo: {
      //   lsId: '',
      //   userInfoName: '',
      //   userInfoSex: '1',
      //   workOrderEndDate: '',
      //   workOrderDesc: '',
      //   lenderPhone: ''
      // },
      this.userInfo = this.orderDetail[0]
      this.userInfo.userInfoSex = '1'
      this.userInfo.workOrderEndDate = ''
    }
  },
  mounted(){
    const params = this.$route.params.lsStatus
    if(params!==''){
      this.backFillForm()
    }
  }
}
</script>
<style lang="less" scoped>
.filedBox {
  padding: @padding-sm;
  * {
    font-size: @font-size-sm;
  }
}
</style>
